<template>
  <div class="micro-shoppingActivity-box">
    <!--预览控制区-->
    <div class="design-prediv-controller">
      <div v-if="formData.activity_list.length != 0" class="activity_con">
        <div v-for="(item,index) in formData.activity_list" :key="index" class="activityItem shad28_activity">
          <img style="width:100%;height:145px" border-radius="6" :src="item.imgUrl">
          <div class="avtivityContent">
            <div class="dis al_item">
              <div class="avtivityType dis dis_ju al_item">{{ item.activityType == 0 && '满减' || item.activityType == 1 && '积分兑换' || item.activityType == 2 && '拼团' || item.activityType == 3 && '幸运大抽奖' || item.activityType == 4 && '支付有礼' || item.activityType == 5 && '打包一口价' || item.activityType == 6 && '打包' || item.activityType == 7 && '分享' || item.activityType == 8 && '秒杀' }}</div>
              <div class="avtivityTitle ell_1">{{ item.activityName }}</div>
            </div>
            <div class="activityTime">{{ item.activityTime }}</div>
          </div>
        </div>

      </div>
      <div v-else class="activity_con">
        <div class="activityItem shad28_activity">
          <div class="image_replace">
            <span class="color">请配置活动图片</span>
          </div>
          <div class="avtivityContent">
            <div class="dis al_item">
              <div class="avtivityType dis dis_ju al_item">活动类型</div>
              <div class="avtivityTitle ell_1">活动标题</div>
            </div>
            <div class="activityTime">活动时间</div>
          </div>
        </div>
      </div>
    </div>
    <!--编辑工作区-->
    <div v-if="isShowEdit" class="design-editor-item design-hide-class">
      <div class="design-config-editor">
        <div class="design-editor-component-title">图文组件</div>
        <div class="tab-nav-set">
          <!-- 配置-->
          <div class="tab-set-box">
            <div class="tab-set">
              <div
                v-for="(item,index) in setTypeList"
                :key="index"
                :class="['tab-set-item',{active:item.type === formData.set.type}]"
                @click="formData.set.type=item.type"
              >
                <div class="set-item-list">{{ item.title }}</div>
              </div>
            </div>
            <div class="color-set">
              <div class="color-set-title">背景颜色</div>
              <el-color-picker v-model="formData.set.bg_color" show-alpha />
            </div>
            <div class="color-set">
              <div class="color-set-title">字体颜色</div>
              <el-color-picker v-model="formData.set.font_color" />
            </div>
          </div>

          <div v-for="(item,index) in formData.activity_list" :key="index" class="tab-nav-set-item">
            <div class="set-box">
              <!--图片-->
              <div
                v-if="formData.set.type !==3&&item.id"
                class="set-image"
                :style="{backgroundImage:'url('+item.imgUrl+')'}"
                @click="choosePage(index,'img')"
              >
                <span v-if="!item.imgUrl">+</span>
                <div class="set-image-add">{{ item.imgUrl?'更改图片':'添加图片' }}</div>
              </div>
              <!-- 标题信息-->
              <div class="set-info">
                <div v-if="formData.set.type !==1&&item.id" class="set-item-title">
                  标题：
                  <p>
                    <el-input v-model="item.activityName" maxlength="8" size="mini" placeholder="标题" />
                  </p>
                </div>
                <!-- :class="{show:item.title}"-->
                <div class="set-item-title choose-micro show">
                  选择活动：
                  <p>
                    <el-button type="text" size="mini" @click="choosePage(index)">{{ item.activityName ||'点击选择' }}
                    </el-button>
                  </p>
                </div>
              </div>
            </div>
            <span class="set-close" @click="formData.activity_list.splice(index,1)">X</span>
          </div>
          <div v-if="formData.activity_list.length < 9" class="tab-nav-add" @click="addNav">增加活动</div>
        </div>
      </div>
    </div>
    <!--选择微页面-->
    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="活动列表"
      :visible.sync="dialogChoosePages"
      width="42%"
    >
      <div class="choose-goods-compent">
        <choose-feature
          :is-get-choose-data="isGetChooseFeature"
          @chooseChooseFeaturesFun="chooseChooseFeaturesFun"
        />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
          <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!--我的图片-->
    <!-- <el-dialog
            custom-class="up-dialog"
            :close-on-click-modal="false"
            top="5vh"
            title="我的图片"
            :visible.sync="dialogChooseImgVisible"
            width="42%"
    >
      <div class="choose-goods-compent">
        <chooseImages
                :can-choose-images-num="1"
                :is-get-choose-images="isGetChooseImages"
                @chooseImagesEnd="chooseImagesEnd"
        />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseImages=!isGetChooseImages">确定</el-button>
          <el-button size="mini" @click="dialogChooseImgVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog> -->
    <!-- 选择活动 -->
    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="选择活动"
      :visible.sync="dialogChooseGoods"
      width="70%"
    >
      <div class="dialog-content">
        <chooseActivity :is-get-choose-data="isGetChooseData" :click-num="clickNum" @chooseGoodsFun="chooseGoodsFun" />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseData=!isGetChooseData">确定</el-button>
          <el-button size="mini" @click="dialogChooseGoods = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="可选功能导航"
      :visible.sync="dialogChooseGoods"
      width="70%"
    >
      <div class="dialog-content">
        <chooseNavs :is-get-choose-data="isGetChooseData" @chooseGoodsFun="chooseGoodsFun" />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseData=!isGetChooseData">确定</el-button>
          <el-button size="mini" @click="dialogChooseGoods = false">取消</el-button>
        </div>
      </div>
    </el-dialog> -->
    <chooseImages
      ref="pics"
      :can-choose-images-num="canChooseImagesNum"
      :max="canChooseImagesNum"
      @chooseImagesEnd="chooseImagesEnd"
      @getUrl="getPicsUrl"
    />
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
